<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>

	<body>

	<div class="layui-layout layui-layout-admin" >

		<div th:insert="~{front/header::#header}"></div>

		<div class="layui-main " style="margin-top: 70px">
			<div style="margin-left: 20%">
				<fieldset class="layui-elem-field layui-field-title" style="">
					<legend>
						<h2> 我的订单 </h2>
					</legend>
				</fieldset>
			</div>

			<div class="layui-fluid">

			</div>
		<!-- 数据表格 -->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="order-table">

				</table>
			</div>
		</div>



		</div>
	</div>



	<script type="text/html" id="order-toolbar">


	</script>


		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>



			// 编辑
			function orderShow(id){
				layer.open({
					type: 2,
					title: '查看订单',
					shade: 0.1,
					area: ['650px', '700px'], // 长 宽
					content: '/order/editOrder/'+id
				});
			}

			// 删除食品
			function deleteOrder(id) {
				layer.confirm('确定要从购物车删除该商品吗?', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					layui.jquery.ajax({
						url: '/order/removeOrder/' + id,
						type: 'delete',
						success:function(result){
							if (parseInt(result.code) === 200) {
								layer.msg(result.message, {icon: 1,time: 500},function () {
									layer.close(loading);
									parent.layui.table.reload("order-table");
								});
							} else {
								layer.msg(result.message, {icon: 2,time: 500},function () {
									layer.close(loading);
									parent.layui.table.reload("order-table");
								});
							}
						},
						error:function (result) {
							console.log("error "+result.message);
							layer.msg("删除失败,请稍后再试", {icon: 2,time: 500},function () {
								layer.close(loading);
								parent.layui.table.reload("order-table");
							});
						}
					})
				})
			}
			// 更改密码
			function updatePassword() {
				layer.open({
					type: 2,
					title: '修改密码',
					shade: 0.1,
					area: ['600px', '450px'],
					content: '/user/updatePassword'
				});
			}

			layui.use(['table', 'form', 'jquery','common','util'], function() {
				let table = layui.table;
				let form = layui.form;
				let util = layui.util;
				let $ = layui.jquery;
				let common = layui.common;

				let cols = [
					[
						{
							title: '商品',
							field: 'fname',
							align: 'center'
						},
						{
							title: '种类',
							field: 'kname',
							align: 'center',
						},
						{
							title: '图片',
							field: 'img',
							align: 'center',
							rowspan:3,
							templet: '<div style="height: 100px"> <img src="{{d.fimg}}" height="100px"> </div>'
						},
						{
							title: '单价',
							field: 'fprice',
							align: 'center'
						},
						{
							title: '数量',
							field: 'nums',
							align: 'center'
						},
						{
							title: '购买时间',
							field: 'gmtUpdate',
							align: 'center'
						},
						{
							title: '操作',
							align: 'center',
							width: 200,
							templet:'<div>' +
									'<button class="pear-btn pear-btn-primary pear-btn-sm" onclick="orderShow({{d.id}})"><i class="layui-icon layui-icon-edit"></i></button> &nbsp;' +
									'<button class="pear-btn pear-btn-danger pear-btn-sm" onclick="deleteOrder({{d.id}})" ><i class="layui-icon layui-icon-delete"></i></button>  &nbsp;' +
									'</div>'
						}
					]
				]


				table.render({
					elem: '#order-table',
					url: '/order/showUserBuyOrder',
					page: true,
					cols: cols,
					skin: 'line',
					method: 'post', // post请求 默认为get
					toolbar: '#order-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(order-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(order-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(order-query)', function(data) {
					table.reload('order-table', {
						method:'post',
						where: data.field
					})
					return false;
				});

				form.on('switch(order-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});



				window.refresh = function(param) {
					table.reload('order-table');
				}
			});

		</script>

	</body>
</html>
